<template>
    <view class="details">
        <view class="detail_top">
            <view class="top">
                <view>发起单位：{{ data.info.unit }}</view>
                <view>ID:{{ data.info.code }}</view>
            </view>
            <view class="titles">{{ data.info.title }}</view>
            <view class="paratext">{{ data.info.subtitle }}</view>

            <view v-if="data.info.type == 1" class="time">截止时间:{{ data.info.end_time_text }}</view>
            <view v-if="data.info.type == 2" class="time">任务周期:{{ data.info.start_date_text }} ~ {{ data.info.end_date_text
            }}
            </view>
            <view v-if="data.info.daka" class="time">打卡时间:{{ data.info.daka }}</view>
            <view class="bottoms mylist_bottom">



                <view v-if="data.info.status == 2" class="my_bntlist notext">
                    <view class="listimg">
                        <image src="https://txr001.zthj.net/voucher_img/pause.png"></image>
                    </view>
                    <view class="texts">已结束</view>
                </view>
                <view v-if="data.info.status == 0 || data.info.status == 3" class="my_bntlist"
                    :class="{ 'notextstre': data.info.status == 3 }" @click="stop(data.info.s_id)">
                    <view class="listimg">
                        <image src="https://txr001.zthj.net/voucher_img/initiate.png"></image>
                    </view>
                    <view class="texts">开始</view>
                </view>
                <view v-if="data.info.status == 1" class="my_bntlist" @click="finish(data.info.s_id)"
                    :class="{ 'notextred': data.info.status == 1 }">
                    <view class="listimg">
                        <image src="https://txr001.zthj.net/voucher_img/pause1.png"></image>
                    </view>
                    <view class="texts">结束</view>
                </view>


                <view class="my_bntlist" @click="stop(data.info.s_id)" :class="{ 'notext': data.info.status != 1 }">
                    <view class="listimg">
                        <image
                            :src="data.info.status == 1 ? 'https://txr001.zthj.net/voucher_img/pause_ok.png' : 'https://txr001.zthj.net/voucher_img/pause_no.png'">
                        </image>
                    </view>
                    <view class="texts">暂停</view>
                </view>
                <view class="my_bntlist" @click="send(data.info.s_id)" :class="{ 'notext': data.info.status == 2 }">
                    <view class="listimg">
                        <image
                            :src="data.info.status == 2 ? 'https://txr001.zthj.net/voucher_img/share_no.png' : 'https://txr001.zthj.net/voucher_img/share.png'">
                        </image>
                    </view>
                    <view class="texts">发放</view>
                </view>
                <view class="my_bntlist" @click="handleCompileBtn"
                    :class="{ 'notext': data.info.status == 1 || data.info.status == 2 }">
                    <view class="listimg">
                        <image
                            :src="data.info.status == 1 || data.info.status == 2 ? 'https://txr001.zthj.net/voucher_img/edit_no.png' : 'https://txr001.zthj.net/voucher_img/edit.png'">
                        </image>
                    </view>
                    <view class="texts">编辑</view>
                </view>
                <view class="my_bntlist" @click="delStatistics(data.info.s_id)"
                    :class="{ 'notext': data.info.status == 2 || data.info.status == 1 }">
                    <view class="listimg">
                        <image
                            :src="data.info.status == 2 || data.info.status == 1 ? 'https://txr001.zthj.net/voucher_img/delete_no.png' : 'https://txr001.zthj.net/voucher_img/delete.png'">
                        </image>
                    </view>
                    <view class="texts">删除</view>
                </view>



            </view>
        </view>
        <view class="details_mian">
            <view class="main_top">
                <view class="main_top_list"><text>{{ data.info.join_count }}</text><text>发放人数</text></view>
                <view class="main_top_list"><text>{{ data.finish }}/{{ data.count }}</text><text>已完成/任务总数</text></view>
            </view>
            <view class="tabs">
                <view @click="tabsfn(0)" :class="{ 'isokbnt': 0 == tabsindex }">查看所有 </view>
                <view @click="tabsfn(1)" :class="{ 'isokbnt': 1 == tabsindex }">
                    <block v-if="data.info.type == 1">
                        查看未完成<text>({{ data.count - data.finish }})</text>
                    </block>
                    <block v-else>
                        查看逾期<text>({{ data.yuqi_num }})</text>
                    </block>

                </view>
            </view>
            <view class="main_list" v-if="data.list.length != 0">
                <crewListDaKa v-if="data.info.type == 2" :list="data.list" @jumpPersonage="jumpPersonageDaka">
                </crewListDaKa>
                <crewList v-else :list="data.list" @jumpPersonage="jumpPersonage"></crewList>
            </view>
            <view class="text-center" v-if="data.list.length == 0">
                <image src="https://txr001.zthj.net/static/img/background.png" class="lgog-img"></image>
                <view class="text-center_no">
                    暂无数据
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import crewList from '../../components/voucher-component/crew_list' //列表
import crewListDaKa from '../../components/voucher-component/crew_list_daka' //列表
export default {
    components: {
        crewList,
        crewListDaKa
    },
    data() {
        return {
            s_id: 0,
            tabs: [
                { title: "查看所有" },
                { title: "查看未完成" }
            ],
            data: {},
            crewArr: [{ type: 1 }, { type: 1 }, { type: 2 }],
            tabsindex: 0
        }
    },
    onLoad(res) {
        this.s_id = res.s_id;
        let title = res.type == 1 ? '问卷' : "打卡"
        uni.setNavigationBarTitle({
            title: title
        })

    },
    onShow() {
        this.load()
    },
    methods: {
        load() {
            let that = this;
            that.$api.getJoinList({
                s_id: this.s_id,
                tab: this.tabsindex
            }).then((res) => {
                that.data = res.data
            })
        },
        toPages(item) {
            uni.navigateTo({
                url: `/pages/voucher/${item}`
            })
        },
        tabsfn(index) {
            this.tabsindex = index
            this.load();
        },
        jumpPersonage(res) {
            if (res.is_submit == 0) return;
            uni.navigateTo({
                // url:"/pages/voucher/personage?type="+res.type
                url: "/subpackage/pages/voucher/completeClock?type=" + this.data.info.type + "&join_id=" + res.is_submit
            })
        },
        jumpPersonageDaka(res) {
            uni.navigateTo({
                // url:"/pages/voucher/personage?type="+res.type
                url: "/subpackage/pages/voucher/personage?s_id=" + this.data.info.s_id + "&user_id=" + res.user_id
            })
        },
        delStatistics(e) {
            if (this.data.info.status == 1 || this.data.info.status == 2) {
                return;
            }
            let that = this;
            uni.showModal({
                content: '确认删除',
                success(res) {
                    if (res.confirm == true) {
                        that.$api.delStatistics({
                            s_id: e
                        }).then(() => {
                            uni.navigateBack()
                        })
                    }
                }
            })
        },
        stop(e) {
            if (this.data.info.status == 3) {
                uni.navigateTo({
                    url: '/subpackage/pages/voucher/issue?s_id=' + e
                })
                return;
            }
            if (this.data.info.status == 2) {
                return;
            }
            let that = this;

            if (this.data.info.status == 1) {
                uni.showModal({
                    title: '是否暂停',
                    content: '暂停后任务将无法填写',
                    success(res) {
                        if (res.confirm) {
                            that.$api.stopStatistics({
                                s_id: e
                            }).then(() => {
                                that.load()
                            })
                        }
                    }
                });
                return;
            }

            that.$api.stopStatistics({
                s_id: e
            }).then(() => {
                that.load()
            })
        },
        finish(e) {
            let that = this;
            uni.showModal({
                content: '确认结束',
                success(res) {
                    if (res.confirm == true) {
                        that.$api.finishStatistics({
                            s_id: e
                        }).then(() => {
                            that.my()
                        })
                    }
                }
            })

        },
        send(e) {
            if (this.data.info.status == 2) {
                return;
            }
            uni.navigateTo({
                url: '/subpackage/pages/voucher/issue?s_id=' + e
            })
            this.$forceUpdate();
        },
        // 编辑
        handleCompileBtn() {
            uni.navigateTo({
                url: "/subpackage/pages/voucher/found?type=" + (this.data.info.type == 1 ? 2 : 1) + "&edit_id=" + this.data.info.s_id
            })
        }
    }
}
</script>

<style lang="less" scoped>
.details {
    padding: 32rpx;

    .detail_top {
        width: 100%;
        background: #FFFFFF;
        border-radius: 48rpx;
        padding: 32rpx;
        padding-bottom: 0;
        margin-bottom: 82rpx;

        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24rpx;

            view {
                &:first-child {
                    font-size: 24rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #010101;
                    line-height: 28rpx;
                }

                &:last-child {
                    font-size: 24rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #767879;
                    line-height: 28rpx;
                }
            }
        }

        .titles {
            font-size: 40rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            color: #010101;
            line-height: 47rpx;
            margin-bottom: 8rpx;
        }

        .paratext {
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #767879;
            line-height: 28rpx;
            margin-bottom: 24rpx;
        }

        .time {
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #010101;
            line-height: 28rpx;
            margin-bottom: 32rpx;
        }

        .bottoms {
            padding: 24rpx 0rpx;
            border-top: 2rpx solid #D9D9D9;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .bottom_list {
                width: 20%;
                text-align: center;

                image {
                    width: 48rpx;
                    height: 48rpx;
                    margin: 0 auto;
                    margin-bottom: 8rpx;
                }

                view {
                    font-size: 20rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #BBBBBB;
                    line-height: 23rpx;
                }
            }

            .bottom_listok {
                view {
                    font-size: 20rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #010101;
                    line-height: 23rpx;
                }
            }
        }
    }

    .details_mian {
        background: #FFFFFF;
        border-radius: 48rpx;
        padding: 0 32rpx;
        min-height: 645rpx;

        .main_top {
            padding: 48rpx 0 62rpx 0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .main_top_list {
                width: 50%;
                text-align: center;

                text {
                    display: block;
                    text-align: center;

                    &:first-child {
                        height: 118rpx;
                        font-size: 80rpx;
                        font-family: Oswald, Oswald;
                        font-weight: 600;
                        color: #010101;
                    }

                    &:last-child {
                        font-size: 24rpx;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        color: #010101;
                        line-height: 28rpx;
                        margin-top: 8rpx;
                    }

                }
            }
        }

        .tabs {
            display: flex;
            margin-bottom: 48rpx;

            view {
                border-radius: 28rpx;
                border: 2rpx solid #D9D9D9;
                padding: 0 32rpx;
                text-align: center;
                line-height: 48rpx;
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #010101;
                background-color: #fff;
                margin-right: 20rpx;
            }

            .isokbnt {
                background-color: #24458E;
                border-color: #24458E;
                color: #fff;
            }
        }
    }
}

.main_list {
    position: relative;
    padding-bottom: 80rpx;
}

.text-center {

    text-align: center;

    .lgog-img {
        width: 84rpx;
        height: 117rpx;
        margin-bottom: 16rpx;
        margin-top: 30rpx !important;
    }

    .text-center_no {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #767879;
        line-height: 28rpx;
    }
}

.mylist_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24rpx;
    border-top: 2rpx solid #D9D9D9;

    .my_bntlist {
        flex: 1;
        text-align: center;

        &:first-child {
            width: 190rpx;
            flex: inherit;
        }

        .nmbers {
            font-size: 40rpx;
            font-family: Oswald, Oswald;
            font-weight: 500;
            color: #010101;
            line-height: 48rpx;
            margin-bottom: 8rpx;
        }

        .listimg {
            width: 48rpx;
            height: 48rpx;
            display: block;
            margin: 0 auto;
            margin-bottom: 8rpx;

            image {
                width: 100%;
                height: 100%;
                display: block;
            }
        }

        .texts {
            font-size: 20rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #010101;
            line-height: 23rpx;
        }
    }

    .notext {
        .texts {
            font-size: 20rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #BBBBBB;
            line-height: 23rpx;
        }
    }

    .notextred {
        .texts {
            font-size: 20rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #EC6969;
            line-height: 23rpx;
        }
    }

    .notextstre {
        .texts {
            font-size: 20rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #24458E;
            line-height: 23rpx;
        }
    }
}
</style>